<template>
    <div class="list-group " >
                <h2 class="list-group-item">人气故事榜</h2>
            <div class="item"  v-for="(info,index) in infos.slice(0,5)" :key="index" :class="(index%2==0&&!changecolor||index%2!==0&&changecolor)?'bg_color':'bg_color2' ">
            <router-link  class="list-group-item" :to="{name:'storyDetail',params:{id:info.story_id}}">
                <div class="he">{{index+1}}</div>
                <div class="item-content">
                    <p @click="hot(info)" class="list-group-item-heading">{{info.title}}</p>
                    <p class="list-group-item-text text-muted">{{info.author}}</p>
                </div>
                <div class="item-hot">{{info.reading}}热度</div>
            </router-link>
        </div>       
        
</div>
</template>

<script>
export default {
    data(){
        return{
            infos:[],
            changecolor: false,
            hoted:''
        }
    },
    computed:{
   
    },
    methods:{
        hot(info){
    this.hoted = ++info.reading;
    this.$axios
        .get("/addreading.do?story_id=" + info.story_id
        +"&reading="+this.hoted)
        .then((response) => {
          this.up = response.data;
        if(this.up>0){
          this.$axios
        .get("/search.do?search=" + this.search)
        .then((response) => {
          this.infos = response.data;
          console.log(this.infos);
        })
        }
        })
    },
        change(){
            this.changecolor=!this.changecolor;
        }
    },
    mounted(){
        this.$axios
        .get("/storyList.do")
        .then((response) => {

            this.infos = response.data;
            
            console.log(this.infos);
        })
        .catch(function (error) {
            console.log(error);
        });

    },
}
</script>
<style scoped="scoped">
.list-group{
    width: 72%;
    margin-left: 10%;
    text-align: left;
   
}
/* .list-group-item.bg{
    background-color: rgba(250, 249, 248);
} */
.item div{
    display: inline-block;
    vertical-align: middle;
}
.item-content{
    width: 69%;
    margin-left: 14px;
}  
.item-hot{
    text-align: right;
    font-size: 15px;
    
}
.he{
    font-size: 20px;
    color: brown;
    font-weight: 700;
    
   
}
.list-group-item-heading{
    font-size: 18px;
}
.bg_color{
    background-color: rgba(250, 249, 248) !important;
}
.bg_color2{
    background-color: #fff !important;
}
.list-group-item:last-child{
    background-color: rgba(235, 242, 249,0);
}
.list-group-item:last-child:hover{
    background-color:rgba(235, 242, 249,1) ;
}
</style>
